import App from '../App'
// 引入 react 中 lazy（懒加载）函数
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import Home from '../views/Home'
import Login from '@/views/login'

// 通过 lazy 方法按需导入组件
// 懒加载模式，外层需要套一层 loading 的提示加载组件
const Page = lazy(() => import('../views/Page'))
const About = lazy(() => import('../views/About'))
const Comp1 = lazy(() => import('../views/Comp1'))
const Comp2 = lazy(() => import('../views/Comp2'))
// import About from '../views/About'

// 高阶组件
const withLoadingComp = (comp: JSX.Element) => (
  // 只要是 lazy 懒加载模式，就必须加上 React.Suspense 组件
  // fallback 组件加载前展示的内容
  <React.Suspense fallback={<h1>加载中....</h1>}>{comp}</React.Suspense>
)

const getRoutes = (
  path: React.Key,
  element: React.ReactNode,
  children?: object[],
): object => ({ path, element, children })

const routes = [
  getRoutes('/', <Navigate to="about" />),
  getRoutes('*', <Navigate to="about" />),
  getRoutes('/', <Home />, [
    getRoutes('about', withLoadingComp(<About />)),
    getRoutes('page', withLoadingComp(<Page />)),
  ]),
  getRoutes('sub', <Home />, [
    getRoutes('com1', withLoadingComp(<Comp1 />)),
    getRoutes('com2', withLoadingComp(<Comp2 />)),
  ]),
  getRoutes('login', <Login />),
]

export default routes
